import React, { Component } from 'react';
import { Table, Grid, Button, Menu, Icon, Pagination, Dialog } from '@icedesign/base';
import IceImg from '@icedesign/img';
import IceLabel from '@icedesign/label';
import IceContainer from '@icedesign/container';
import { hashHistory } from 'react-router';
import { AmberService } from '../../services'

export default class Index extends Component {
  static displayName = 'Index';

  constructor(props) {
    super(props);
    this.state = {
      pageIndex : 0
    };
  }

  componentDidMount = () =>{ this.loadData(this.state.pageIndex) }

  loadData = async(page) =>{
    this.setState({loading : true})
    let data = await AmberService.getPage(page)
    this.setState({
      pageIndex : data.pageIndex,
      pageSize : data.pageSize,
      total : data.count,
      dataSource : data.data,
      loading : false
    })
  }

  changePage = (page) =>{ this.loadData(page) }

  edit = (record) => {
    hashHistory.push({
      pathname:`/index/edit/${record.id}`,
      state : record,
    })
  }

  add = () => {
    hashHistory.push({
      pathname:`/index/add`,
    })
  }

  deleteItem = (record) => {
    Dialog.confirm({
      content: "是否确认删除此广告?",
      title: "提示",
      onOk: async() => {
        await AmberService.del(record.id)
        this.loadData(this.state.pageIndex)
      }
    });
  };

  renderOperator = (value, index, record) => {
    return (
      <Button.Split type="primary" shape="ghost" shape="warning" menu={(
        <Menu>
          <Menu.Item onClick={this.edit.bind(this, record)}>编辑</Menu.Item>
          <Menu.Item onClick={this.deleteItem.bind(this, record)}>删除</Menu.Item>
      </Menu>
      )}>操作</Button.Split>
    );
  };

  renderStatus = (value, index, record) => {
    if(record.status == 0){
      return ( <IceLabel status="default">未发布</IceLabel> )
    }else{
      return ( <IceLabel status="success">发布</IceLabel> )
    }
  }

  renderLocation = (value, index, record) => {
    if(record.location == 1){
      return <p>头部</p>
    }else{
      return <p>尾部</p>
    }
  }

  renderImage = (value, index, record) =>{
    return <IceImg src={record.image} width={48} height={48} />
  }

  render() {
    return (
      <div className="selectable-table" style={styles.selectableTable}>
        <IceContainer>
          <h2 style={styles.formTitle}>广告设置</h2>
          <Grid.Row wrap style={{marginBottom: '10px', display:'flex', justifyContent : 'flex-end'}}>
            <Button type="primary" style={{borderRadius: '4px'}} onClick={this.add}>
              <Icon type="add" size="xs" style={{ marginRight: '4px' }}/>添加
            </Button>
          </Grid.Row>
          <Table dataSource={this.state.dataSource} isLoading={this.state.loading} >
            <Table.Column title="图片" cell={this.renderImage} width={100} />
            <Table.Column title="标题" dataIndex="title" width={100} />
            <Table.Column title="栏位" cell={this.renderLocation} align="center" width={100} />
            <Table.Column title="状态" cell={this.renderStatus} align="center" width={100} />
            <Table.Column title="操作" cell={this.renderOperator} align="center" width={150} />
          </Table>
          <div style={styles.pagination}>
            <Pagination onChange={this.changePage} current={this.state.pageIndex} total={this.state.total} pageSize={this.state.pageSize}/>
          </div>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  batchBtn: {
    marginRight: '10px',
  },
  IceContainer: {
    marginBottom: '20px',
    minHeight: 'auto',
    display: 'flex',
    justifyContent: 'space-between',
  },
  removeBtn: {
    marginLeft: 10,
  },
  pagination: {
    textAlign: 'right',
    paddingTop: '26px',
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};
